<template>
    <el-dialog v-model="visible" title="手动上传识别" width="700px" :close-on-click-modal="false">
        <div class="upload-section">
            <div class="url-input-group">
                <el-switch v-model="useVideoUrl" active-text="使用视频链接" style="margin-right: 10px;" />
            </div>
            <div v-if="useVideoUrl" class="url-input-section">
                <span class="label">视频链接：</span>
                <el-input v-model="videoUrl" placeholder="请输入视频链接" clearable style="flex: 1; margin-right: 10px;" />
                <el-button type="primary" @click="handleAddUrl">添加</el-button>
            </div>
            <div class="upload-drag-area" v-else>
                <el-upload ref="uploadRef" :auto-upload="false" :on-change="handleFileChange" :show-file-list="false"
                    accept="video/*" multiple drag class="upload-drag">
                    <el-icon class="el-icon--upload">
                        <Upload />
                    </el-icon>
                    <div class="el-upload__text">
                        将文件拖到此处，或<em>点击上传</em>
                    </div>
                    <template #tip>
                        <div class="el-upload__tip">支持上传视频文件</div>
                    </template>
                </el-upload>
            </div>
        </div>

        <div class="video-list">
            <div class="list-header">
                <span>视频列表（{{ videoList.length }}）</span>
                <div class="upload-settings" v-if="!useVideoUrl && videoList.length > 0">
                    <span style="font-size: 12px; color: #909399;">
                        总大小: {{ formatFileSize(totalSize) }}
                    </span>
                </div>
            </div>
            <div class="list-content" v-if="videoList.length > 0">
                <div v-for="(item, index) in videoList" :key="index" class="video-item">
                    <div class="video-info">
                        <video v-if="item.type === 'file'" :src="item.url" class="video-preview"
                            preload="metadata"></video>
                        <div v-else class="url-preview">
                            <el-icon class="url-icon">
                                <Link />
                            </el-icon>
                        </div>
                        <div class="video-details">
                            <div class="video-name">{{ item.name }}</div>
                            <div class="video-size" v-if="item.size">{{ formatFileSize(item.size) }}</div>
                            <div class="video-url" v-if="item.type === 'url'">{{ item.url }}</div>
                            <!-- 上传进度 -->
                            <div v-if="item.uploadStatus" class="upload-status">
                                <el-progress :percentage="item.uploadProgress || 0"
                                    :status="item.uploadStatus === 'success' ? 'success' : item.uploadStatus === 'error' ? 'exception' : undefined"
                                    :stroke-width="4" />
                                <span class="status-text">{{ getStatusText(item) }}</span>
                            </div>
                        </div>
                    </div>
                    <el-button type="danger" link @click="handleRemove(index)" :disabled="submitLoading">
                        删除
                    </el-button>
                </div>
            </div>
            <el-empty v-else description="暂无视频" />
        </div>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleCancel">返回</el-button>
                <el-button type="primary" @click="handleSubmit" :loading="submitLoading">提交</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import { ElMessage, ElLoading, ElMessageBox, type UploadFile } from 'element-plus';
import { Upload, Link } from '@element-plus/icons-vue';
import { UPLOAD_SERVICE_URL } from '../config';
import service from '../config';
import axios from 'axios';
import { useAuthStore } from '../store/auth';

const authStore = useAuthStore();

const visible = defineModel<boolean>('visible', { default: false })
const emit = defineEmits(['success'])

const submitLoading = ref(false)
const useVideoUrl = ref(false)
const videoUrl = ref('')
const uploadRef = ref()
const uploadProgress = ref(0)

const TOTAL_SIZE_THRESHOLD = 40 * 1024 * 1024 // 40MB 阈值
const LARGE_FILE_SIZE = 20 * 1024 * 1024 // 20MB 单个大文件阈值
const BATCH_SIZE = 5 // 每批上传5个文件

interface VideoItem {
    name: string
    url: string
    type: 'file' | 'url'
    file?: File
    size?: number
    uploadProgress?: number // 上传进度
    uploadStatus?: 'waiting' | 'uploading' | 'success' | 'error' // 上传状态
    uploadedUrl?: string // 上传后的URL
    errorMessage?: string // 错误信息
}

const videoList = ref<VideoItem[]>([])

// 计算总文件大小
const totalSize = computed(() => {
    return videoList.value
        .filter(item => item.type === 'file')
        .reduce((sum, item) => sum + (item.size || 0), 0)
})

// 获取状态文本
const getStatusText = (item: VideoItem) => {
    switch (item.uploadStatus) {
        case 'waiting': return '等待上传...'
        case 'uploading': return `上传中 ${item.uploadProgress || 0}%`
        case 'success': return '上传成功'
        case 'error': return `上传失败: ${item.errorMessage || '未知错误'}`
        default: return ''
    }
}


watch(useVideoUrl, (newVal) => {
    if (videoList.value.length > 0) {
        videoList.value.forEach(item => {
            if (item.type === 'file' && item.url) {
                URL.revokeObjectURL(item.url)
            }
        })
        videoList.value = []
    }
})

// 处理文件选择
const handleFileChange = (file: UploadFile) => {
    if (!file.raw) return
    // 检查文件类型
    if (!file.raw.type.startsWith('video/')) {
        ElMessage.warning('请上传视频文件')
        return
    }
    // 创建预览URL
    const url = URL.createObjectURL(file.raw)
    videoList.value.push({
        name: file.name,
        url: url,
        type: 'file',
        file: file.raw,
        size: file.size
    })
}

// 添加URL
const handleAddUrl = () => {
    if (!videoUrl.value.trim()) {
        ElMessage.warning('请输入视频链接')
        return
    }
    videoList.value.push({
        name: videoUrl.value.split('/').pop() || 'Video Link',
        url: videoUrl.value,
        type: 'url'
    })
    videoUrl.value = ''
}

// 删除视频
const handleRemove = (index: number) => {
    const item = videoList.value[index]
    if (item.type === 'file' && item.url) {
        URL.revokeObjectURL(item.url)
    }
    videoList.value.splice(index, 1)
}

// 格式化文件大小
const formatFileSize = (bytes: number) => {
    if (bytes === 0) return '0 B'
    const k = 1024
    const sizes = ['B', 'KB', 'MB', 'GB']
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i]
}

// 取消
const handleCancel = () => {
    visible.value = false
}

// 上传批次文件
const UPLOAD_TIMEOUT = 300000 //超时时间
const uploadBatchFiles = async (items: VideoItem[], onProgress?: (progress: number) => void): Promise<string[]> => {
    if (items.length === 0) {
        return []
    }

    const formData = new FormData()
    items.forEach(item => {
        if (item.file) {
            formData.append('files', item.file)
        }
    })
    let bucketName = 'material-dentification'
    let domainName = 'https://minio-img.pixeljet-n8n.com'
    const uploadUrl = `${UPLOAD_SERVICE_URL}/api/file/upload/batch?bucketName=${encodeURIComponent(bucketName)}&domainName=${encodeURIComponent(domainName)}`
    const uploadResponse = await axios.post(uploadUrl, formData, {
        headers: {
            'Content-Type': 'multipart/form-data'
        },
        timeout: UPLOAD_TIMEOUT,
        onUploadProgress: (progressEvent) => {
            if (progressEvent.total) {
                const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total)
                items.forEach(item => {
                    item.uploadProgress = progress
                })
                onProgress?.(progress)
            }
        }
    })
    const uploadedUrls = uploadResponse.data?.data || []
    return uploadedUrls.map((u: any) => u.fileUrl)
}

// 批量上传管理器
class BatchUploadManager {
    private batches: VideoItem[][] = []  //总批次
    private currentBatch: number = 0  //当前批次
    private onProgress?: (currentBatch: number, totalBatches: number, retryInfo: string, fileNames: string, progress?: number) => void

    constructor(onProgress?: (currentBatch: number, totalBatches: number, retryInfo: string, fileNames: string, progress?: number) => void) {
        this.onProgress = onProgress
    }

    // 分组
    groupFiles(files: VideoItem[]): void {
        this.batches = []
        const largeFiles: VideoItem[] = []
        const smallFiles: VideoItem[] = []

        // 分离大文件和小文件
        files.forEach(file => {
            if ((file.size || 0) > LARGE_FILE_SIZE) {
                largeFiles.push(file)
            } else {
                smallFiles.push(file)
            }
        })

        // 大文件单独一批
        largeFiles.forEach((file, index) => {
            this.batches.push([file])
        })

        // 小文件按BATCH_SIZE分组
        for (let i = 0; i < smallFiles.length; i += BATCH_SIZE) {
            const batch = smallFiles.slice(i, i + BATCH_SIZE)
            this.batches.push(batch)
        }
    }

    // 处理单个批次
    async processBatch(batch: VideoItem[], retryCount: number = 0): Promise<void> {
        batch.forEach(item => {
            item.uploadStatus = 'uploading'
            item.uploadProgress = 0
        })

        const fileNames = batch.map(f => f.name).join(', ')
        const retryPrefix = retryCount > 0 ? `重试上传 (第 ${retryCount} 次)` : ''
        try {
            const urls = await uploadBatchFiles(batch, (progress) => {
                this.onProgress?.(this.currentBatch + 1, this.batches.length, retryPrefix, fileNames, progress)
            })

            // 更新每个文件的URL
            batch.forEach((item, index) => {
                if (index < urls.length) {
                    item.uploadedUrl = urls[index]
                    item.uploadStatus = 'success'
                    item.uploadProgress = 100
                } else {
                    item.uploadStatus = 'error'
                    item.errorMessage = 'URL未返回'
                }
            })
        } catch (error: any) {
            if (error.message === '用户取消上传') {
                batch.forEach(item => {
                    item.uploadStatus = 'error'
                    item.errorMessage = '取消上传'
                })
                throw error
            }

            // 重试
            const isTimeout = error.code === 'ECONNABORTED' || error.message?.includes('timeout')
            const errorMsg = isTimeout ? '上传超时' : `上传失败: ${error.message}`
            try {
                await this.askRetry(errorMsg, fileNames, retryCount + 1)
                await this.processBatch(batch, retryCount + 1)
                return
            } catch (cancelError: any) {
                // 用户取消，标记文件为失败状态
                batch.forEach(item => {
                    item.uploadStatus = 'error'
                    item.errorMessage = error.message || '上传失败'
                })
                throw cancelError
            }
        }

        this.onProgress?.(this.currentBatch + 1, this.batches.length, '', '')
    }

    // 重试
    private async askRetry(errorMsg: string, fileNames: string, retryCount: number): Promise<void> {
        const retryInfo = retryCount > 1 ? `（已重试 ${retryCount - 1} 次）` : ''
        try {
            await ElMessageBox.confirm(
                `${errorMsg}\n文件: ${fileNames}\n\n是否重试？${retryInfo}`,
                '上传失败',
                {
                    confirmButtonText: '重试',
                    cancelButtonText: '取消上传',
                    type: 'warning',
                }
            )
        } catch {
            throw new Error('用户取消上传')
        }
    }

    // 处理所有批次
    async processAll(): Promise<void> {
        // 标记所有文件为等待状态
        this.batches.flat().forEach(item => {
            item.uploadStatus = 'waiting'
            item.uploadProgress = 0
        })
        this.onProgress?.(0, this.batches.length, '', '准备上传...')

        try {
            // 逐批处理
            for (let i = 0; i < this.batches.length; i++) {
                this.currentBatch = i
                const batch = this.batches[i]
                await this.processBatch(batch)
            }
        } catch (error) {
            this.batches.flat().forEach(item => {
                if (item.uploadStatus !== 'success') {
                    item.uploadStatus = 'error'
                    item.errorMessage = item.errorMessage || '上传被中断'
                }
            })
            throw error
        }
    }

    getBatches(): VideoItem[][] {
        return this.batches
    }
}

// 上传单批文件
const uploadSingleBatch = async (filesToUpload: VideoItem[], loadingInstance: any, retryCount: number = 0): Promise<void> => {
    filesToUpload.forEach(item => {
        item.uploadStatus = 'uploading'
        item.uploadProgress = 0
    })

    loadingInstance.setText(retryCount > 0
        ? `重试上传（第 ${retryCount} 次）...`
        : `正在上传 ${filesToUpload.length} 个文件...`)

    try {
        const urls = await uploadBatchFiles(filesToUpload, (progress) => {
            loadingInstance.setText(`正在上传... ${progress}%`)
        })

        // 更新文件状态和 URL
        filesToUpload.forEach((item, index) => {
            if (index < urls.length) {
                item.uploadedUrl = urls[index]
                item.uploadStatus = 'success'
                item.uploadProgress = 100
            } else {
                item.uploadStatus = 'error'
                item.errorMessage = 'URL未返回'
            }
        })
    } catch (error: any) {
        console.error(`上传失败 (第 ${retryCount + 1} 次尝试):`, error)
        loadingInstance.close()

        const isTimeout = error.code === 'ECONNABORTED' || error.message?.includes('timeout')
        const errorMsg = isTimeout ? '上传超时，请检查网络连接' : `上传失败: ${error.message}`
        const retryInfo = retryCount > 0 ? `（已重试 ${retryCount} 次）` : ''

        try {
            await ElMessageBox.confirm(
                `${errorMsg}\n\n是否重试？${retryInfo}`,
                '上传失败',
                {
                    confirmButtonText: '重试',
                    cancelButtonText: '取消上传',
                    type: 'warning',
                }
            )

            // 重新创建loading
            const newLoadingInstance = ElLoading.service({
                lock: true,
                text: '准备重试...',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            await uploadSingleBatch(filesToUpload, newLoadingInstance, retryCount + 1)
            return
        } catch {
            filesToUpload.forEach(item => {
                item.uploadStatus = 'error'
                item.errorMessage = '取消上传'
            })
            throw new Error('取消上传')
        }
    }
}

// 提交
const handleSubmit = async () => {
    if (videoList.value.length === 0) {
        ElMessage.warning('请至少添加一个视频')
        return
    }
    let loadingInstance: any = null
    try {
        submitLoading.value = true
        // 文件上传
        const filesToUpload = videoList.value.filter(item =>
            item.type === 'file' && item.file && item.uploadStatus !== 'success'
        )
        if (filesToUpload.length > 0) {
            // 计算需要上传的文件总大小
            const total = filesToUpload.reduce((sum, item) => sum + (item.size || 0), 0)

            // 判断是否需要分批上传
            if (total > TOTAL_SIZE_THRESHOLD) {
                // 创建全屏loading
                loadingInstance = ElLoading.service({
                    lock: true,
                    text: '准备分批上传...',
                    background: 'rgba(0, 0, 0, 0.7)',
                })

                // 创建批量上传管理器
                const batchManager = new BatchUploadManager((currentBatch, totalBatches, retryInfo, fileNames, progress) => {
                    if (retryInfo) {
                        // 重试状态
                        const progressText = progress !== undefined ? ` - ${progress}%` : ''
                        loadingInstance.setText(`${retryInfo} - ${fileNames}${progressText}`)
                    } else if (fileNames) {
                        // 正常上传，显示文件名和进度
                        const shortName = fileNames.length > 50 ? fileNames.substring(0, 50) + '...' : fileNames
                        const progressText = progress !== undefined ? ` - ${progress}%` : ''
                        loadingInstance.setText(`正在上传 (${currentBatch}/${totalBatches}): ${shortName}${progressText}`)
                    } else {
                        // 其他状态
                        loadingInstance.setText(`上传进度: ${currentBatch}/${totalBatches}`)
                    }
                })

                // 分组文件
                batchManager.groupFiles(filesToUpload)
                loadingInstance.setText(`开始上传...`)

                // 处理所有批次
                await batchManager.processAll()

                loadingInstance.close()
                loadingInstance = null
            } else {
                // 创建全屏loading
                loadingInstance = ElLoading.service({
                    lock: true,
                    text: '正在上传文件...',
                    background: 'rgba(0, 0, 0, 0.7)',
                })

                await uploadSingleBatch(filesToUpload, loadingInstance)
                loadingInstance.close()
                loadingInstance = null
            }

            while (true) {
                // 检查文件上传情况
                const failedFiles = videoList.value.filter(item =>
                    item.type === 'file' && item.uploadStatus !== 'success'
                )

                if (failedFiles.length === 0) {
                    break
                }

                // 有未成功的文件，询问是否重新上传
                const failedNames = failedFiles.map(f => f.name).join(', ')
                const failedCount = failedFiles.length
                const errorCount = failedFiles.filter(f => f.uploadStatus === 'error').length
                const pendingCount = failedCount - errorCount

                let message = `有 ${failedCount} 个文件未成功上传：\n${failedNames}\n\n`
                if (errorCount > 0 && pendingCount > 0) {
                    message += `（其中 ${errorCount} 个失败，${pendingCount} 个未上传）\n\n`
                } else if (errorCount > 0) {
                    message += `（全部失败）\n\n`
                } else {
                    message += `（全部未上传）\n\n`
                }
                message += '是否重新上传这些文件？'

                try {
                    await ElMessageBox.confirm(
                        message,
                        '上传未完成',
                        {
                            confirmButtonText: '重新上传',
                            cancelButtonText: '取消',
                            type: 'warning',
                        }
                    )
                } catch {
                    throw new Error('用户取消上传')
                }

                // 计算失败文件的总大小
                const failedTotal = failedFiles.reduce((sum, item) => sum + (item.size || 0), 0)

                if (failedTotal > TOTAL_SIZE_THRESHOLD) {
                    // 分批上传失败的文件
                    loadingInstance = ElLoading.service({
                        lock: true,
                        text: '准备重新上传失败的文件...',
                        background: 'rgba(0, 0, 0, 0.7)',
                    })
                    const batchManager = new BatchUploadManager((currentBatch, totalBatches, retryInfo, fileNames, progress) => {
                        if (retryInfo) {
                            const progressText = progress !== undefined ? ` - ${progress}%` : ''
                            loadingInstance.setText(`${retryInfo} - ${fileNames}${progressText}`)
                        } else if (fileNames) {
                            const shortName = fileNames.length > 50 ? fileNames.substring(0, 50) + '...' : fileNames
                            const progressText = progress !== undefined ? ` - ${progress}%` : ''
                            loadingInstance.setText(`正在重新上传 (${currentBatch}/${totalBatches}): ${shortName}${progressText}`)
                        } else {
                            loadingInstance.setText(`重新上传进度: ${currentBatch}/${totalBatches}`)
                        }
                    })
                    batchManager.groupFiles(failedFiles)
                    loadingInstance.setText('开始重新上传...')
                    await batchManager.processAll()
                    loadingInstance.close()
                    loadingInstance = null
                } else {
                    // 一次性上传失败的文件
                    loadingInstance = ElLoading.service({
                        lock: true,
                        text: '正在重新上传失败的文件...',
                        background: 'rgba(0, 0, 0, 0.7)',
                    })
                    await uploadSingleBatch(failedFiles, loadingInstance)
                    loadingInstance.close()
                    loadingInstance = null
                }
            }

            // 更新成功上传的文件URL
            videoList.value.forEach(item => {
                if (item.uploadStatus === 'success' && item.uploadedUrl) {
                    item.url = item.uploadedUrl
                }
            })
        }

        loadingInstance = ElLoading.service({
            lock: true,
            text: '正在创建素材识别',
            background: 'rgba(0, 0, 0, 0.7)',
        })

        try {
            const res = await service.post('/materialRecord/add', {
                isAuto: false
            })
            const urls = videoList.value.map(item => item.url)
            if (urls.length === 0) {
                throw new Error('没有可提交的视频')
            }
            const webhookUrl = import.meta.env.PROD
                ? 'https://pixeljet-n8n.com/webhook/619477f2-5cea-4f37-819c-592e90c4dc06'
                : '/wkfapi/webhook/619477f2-5cea-4f37-819c-592e90c4dc06'
            const payload: any = {
                url: urls,
                model: useVideoUrl.value ? 'url' : 'file',
                arrange_id: res?.data,
                created_user_id: authStore?.userId,
                id:'',
                action :""
                }
            if (import.meta.env.MODE !== 'production') {
                payload.devModel = 'test'
            } else {
                payload.devModel = 'official'
            }
            await axios.post(webhookUrl, payload)
            loadingInstance.close()
            loadingInstance = null
            ElMessage.success(`提交成功，共 ${urls.length} 个视频`)
            visible.value = false
            emit('success')
            resetForm()
        } catch (error) {
            if (loadingInstance) {
                loadingInstance.close()
                loadingInstance = null
            }
            throw error
        }
    } catch (error: any) {
        console.error('处理失败:', error)
        if (error?.message !== '用户取消提交' && error?.message !== '用户取消上传' && error?.message !== '取消上传') {
            ElMessage.error(error?.response?.data?.message || error?.message || '处理失败')
        }
        // 确保关闭loading
        if (loadingInstance) {
            loadingInstance.close()
        }
    } finally {
        submitLoading.value = false
    }
}

// 重置表单
const resetForm = () => {
    videoList.value.forEach(item => {
        if (item.type === 'file' && item.url) {
            URL.revokeObjectURL(item.url)
        }
    })
    videoList.value = []
    useVideoUrl.value = false
    videoUrl.value = ''
    uploadProgress.value = 0
}

defineExpose({
    resetForm
})
</script>

<style lang="scss" scoped>
.upload-section {

    .upload-header {
        margin-bottom: 16px;

        .section-title {
            font-size: 14px;
            font-weight: 500;
            color: #303133;
        }
    }

    .url-input-group {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
    }

    .upload-drag-area {
        margin-bottom: 16px;

        .upload-drag {
            width: 100%;
        }

        :deep(.el-upload-dragger) {
            padding: 15px 20px;
            width: 100%;
            border: 2px dashed #d9d9d9;
            border-radius: 6px;
            background-color: #fafafa;
            transition: all 0.3s;

            &:hover {
                border-color: #409eff;
                background-color: #f0f9ff;
            }
        }

        :deep(.el-icon--upload) {
            font-size: 48px;
            color: #c0c4cc;
            margin-bottom: 16px;
        }

        :deep(.el-upload__text) {
            color: #606266;
            font-size: 14px;

            em {
                color: #409eff;
                font-style: normal;
            }
        }

        :deep(.el-upload__tip) {
            color: #909399;
            font-size: 12px;
            margin-top: 8px;
        }
    }

    .url-input-section {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px;
        background: #f5f7fa;
        border-radius: 4px;
        margin-bottom: 16px;

        .label {
            white-space: nowrap;
            color: #606266;
            font-size: 14px;
        }
    }
}

.video-list {
    .list-header {
        padding: 10px 0;
        border-bottom: 1px solid #e4e7ed;
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: 500;
        color: #303133;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .upload-settings {
            display: flex;
            align-items: center;
        }
    }

    .list-content {
        max-height: 300px;
        overflow-y: auto;
    }

    .video-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px;
        border: 1px solid #e4e7ed;
        border-radius: 4px;
        margin-bottom: 10px;
        transition: all 0.3s;

        &:hover {
            background: #f5f7fa;
            border-color: #c0c4cc;
        }

        .video-info {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
            min-width: 0;

            .video-preview {
                width: 80px;
                height: 60px;
                border-radius: 4px;
            }

            .url-preview {
                width: 80px;
                height: 60px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
                border-radius: 4px;

                .url-icon {
                    font-size: 24px;
                    color: #999;
                }
            }

            .video-details {
                flex: 1;
                min-width: 0;

                .video-name {
                    font-size: 14px;
                    color: #303133;
                    margin-bottom: 4px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .video-size {
                    font-size: 12px;
                    color: #909399;
                }

                .video-url {
                    font-size: 12px;
                    color: #1677ff;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .upload-status {
                    margin-top: 8px;

                    .status-text {
                        font-size: 12px;
                        color: #909399;
                        margin-top: 4px;
                        display: block;
                    }
                }
            }
        }
    }
}
</style>
